<template>
    <div class="container">
        <v-container>
            <h4 class="mb-3">贷款物料详情</h4>
        </v-container>

        <v-container style="top:48px;" :style="{position: $vuetify.breakpoint.mobile ? '' : 'sticky'}">
            <v-row class="grey lighten-3 pa-2" dense no-gutters>
                <v-col :md="3" :sm="6"  cols="12">
                    <span class="font-weight-bold">姓名:</span>
                    <span class="ml-2">{{loan.name}}</span>
                </v-col>
                <v-col :md="3" :sm="6"  cols="12">
                    <span class="font-weight-bold">手机号码:</span>
                    <span class="ml-2">{{loan.mobile}}</span>
                </v-col>
                <v-col :md="3" :sm="6"  cols="12">
                    <span class="font-weight-bold">贷款额度:</span>
                    <span class="ml-2">{{loan.amount_start_zh}} - {{loan.amount_end_zh}}</span>
                </v-col>
                <v-col :md="3" :sm="6"  cols="12" v-if="loan.status != 16">
                    <span class="font-weight-bold">状态:</span>
                    <span class="ml-2">{{loan.status_name}}</span>
                    <v-dialog v-model="statusDialog" width="500" >
                        <template v-slot:activator="{ on, attrs }">
                            <v-btn icon x-small color="primary" v-bind="attrs" v-on="on">
                                <v-icon x-small>mdi-pencil</v-icon>
                            </v-btn>
                        </template>
                        <v-card>
                            <v-card-title>更新状态</v-card-title>
                            <v-card-text>
                                <v-select :items="statusItem" v-model="statusNew" label="状态"> </v-select>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn @click="statusDialog = false" >
                                    关闭
                                </v-btn>
                                <v-btn @click="updateStatus" :loading="saving" color="primary">
                                    保存
                                </v-btn>
                             </v-card-actions>
                        </v-card>
                    </v-dialog>
                </v-col>
                <v-col :md="6" cols="12">
                    <span class="font-weight-bold">贷款申请时间:</span>
                    <span class="ml-2">{{loan.apply_at}}</span>
                </v-col>
                <v-col :md="6" cols="12">
                    <span class="font-weight-bold">是否需要上门:</span>
                    <span class="ml-2">{{loan.need_home_service ? "是" : "否"}}</span>
                </v-col>
                <v-col :md="6" :sm="12"  cols="12">
                    <span class="font-weight-bold">省市区县:</span>
                    <span class="ml-2">
                        <span>{{loan.province}}</span>
                        <span>{{loan.city}}</span>
                        <span>{{loan.district}}</span>
                    </span>
                </v-col>
                 <v-col :md="6" :sm="12"  cols="12">
                    <span class="font-weight-bold">详情地址:</span>
                    <span class="ml-2">
                        <span>{{loan.addr}}</span>
                    </span>
                </v-col>
                <v-col :md="12"  cols="6">
                    <span class="font-weight-bold">类别:</span>
                    <span class="ml-2">
                        <span>{{loan.category_name}}</span>
                        <span v-if="loan.custom_field"> - {{loan.custom_field}}</span>
                    </span>
                </v-col>


                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">是否有房:</span>
                    <span class="ml-2">
                        {{loan.has_house}}
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">是否有车:</span>
                    <span class="ml-2">
                        {{loan.has_car}}
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">是否有社保:</span>
                    <span class="ml-2">
                        {{loan.has}}
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">是否有公司:</span>
                    <span class="ml-2">
                        {{loan.yingyezhizhao}}
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">是否有公积金:</span>
                    <span class="ml-2">
                        {{loan.has_gongjijin}}
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">芝麻分:</span>
                    <span class="ml-2">
                        {{loan.zhima}}
                    </span>
                </v-col>




<!--                <template v-if="loan.mortgage_house">-->
<!--                    <v-col :md="3" :sm="6"  cols="12">-->
<!--                        <span class="font-weight-bold">房屋类型:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_house.type}}</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
<!--                    <v-col :md="3" :sm="6" cols="12">-->
<!--                        <span class="font-weight-bold">是否持有房产证:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_house.typhas_certificate ? "是" : "否" }}</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
<!--                    <v-col :md="3" :sm="6" cols="12">-->
<!--                        <span class="font-weight-bold">房屋所有权:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_house.ownership}}</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
<!--                    <v-col :md="3" :sm="6"  cols="12">-->
<!--                        <span class="font-weight-bold">房子最新评估价:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_house.latest_estimated}}</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
<!--                </template>-->

                <template v-if="loan.mortgage_car">
                    <v-col :sm="6"  cols="12">
                        <span class="font-weight-bold">车辆信息:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_car.info}}</span>
                        </span>
                    </v-col>
<!--                    <v-col :md="3" :sm="6" cols="12">-->
<!--                        <span class="font-weight-bold">购车年限:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_car.car_age}} 年</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
                    <v-col :md="3" :sm="6" cols="12">
                        <span class="font-weight-bold">预估价:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_car.car_price_estimation}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">汽车型号:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_car.car_model}}</span>
                        </span>
                    </v-col>
<!--                      <v-col :md="3" :sm="6"  cols="12">-->
<!--                        <span class="font-weight-bold">车牌号:</span>-->
<!--                        <span class="ml-2">-->
<!--                            <span>{{loan.mortgage_car.car_no}}</span>-->
<!--                        </span>-->
<!--                    </v-col>-->
                </template>

                <template v-if="loan.mortgage_tax">
                    <v-col :sm="6"  cols="12">
                        <span class="font-weight-bold">公司名字:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_tax.company_name}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6" cols="12">
                        <span class="font-weight-bold">年缴税:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_tax.annal_tax}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6" cols="12">
                        <span class="font-weight-bold">年营业额:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_tax.annal_turnover}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">营业执照办理了几年:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_tax.company_age}}  年</span>
                        </span>
                    </v-col>
                      <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">是否为法人:</span>
                        <span class="ml-2">
                            <span>{{loan.mortgage_tax.is_legal_person ? "是" : "否"}}</span>
                        </span>
                    </v-col>
                </template>

                <template v-if="loan.credit_provident">
                    <v-col :sm="6"  cols="12">
                        <span class="font-weight-bold">上班公司名字全称:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.company_name}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">工资发放模式:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.pay_method}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6" cols="12">
                        <span class="font-weight-bold">每个月工资多少:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.month_salary}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">已购买公积金多少年:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.provident_age}}  年</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">每月公积金额度:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.month_provident}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">已购买社保多少年:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.social_insurance_age}}</span>
                        </span>
                    </v-col>
                    <v-col :md="3" :sm="6"  cols="12">
                        <span class="font-weight-bold">每个月社保缴费多少:</span>
                        <span class="ml-2">
                            <span>{{loan.credit_provident.month_social_insurance}}</span>
                        </span>
                    </v-col>
                </template>

                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">当前经办人:</span>
                    <span class="ml-2">
                        <span>{{loan.user ? loan.user.name : "-"}}</span>
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">当前所属组织:</span>
                    <span class="ml-2">
                        <span>{{loan.org ? loan.org.name : "-"}}</span>
                    </span>
                </v-col>
                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">标签:</span>
                    <template  v-if="loan.tags">
                        <v-chip class="mr-2" small color="primary" outlined  label v-for="tag of loan.tags" :key="tag.id">
                            {{tag.title}}
                        </v-chip>
                    </template>
                    <v-chip label small class="px-2" color="primary" outlined   @click="tagDialog=true" >
                        <v-icon x-small>mdi-tag-outline</v-icon>添加标签
                    </v-chip>
                </v-col>



                <v-col :md="3"  cols="12">
                    <span class="font-weight-bold">退款理由:</span>
                    <v-btn color="primary" @click="openDialog">
                        填写留言
                    </v-btn>
                </v-col>
            </v-row>

            <v-row dense class="mt-0">
                <v-col  cols="12" class="py-0">
                    <v-tabs>
                        <v-tab :to="`/loan/${this.id}`" replace>跟踪记录</v-tab>
                        <v-tab :to="`/loan/${this.id}/call`" replace>通话记录</v-tab>
                    </v-tabs>
                </v-col>
            </v-row>

        </v-container>


        <!-- 弹窗表单 -->
        <v-dialog v-model="dialog" max-width="600">
            <v-card>
                <v-card-title class="headline">
                    提交留言
                </v-card-title>

                <v-card-text>
                    <v-form ref="form" @submit.prevent="submit">
                        <v-textarea
                            v-model="comment"
                            label="留言内容"
                            outlined
                            rows="4"
                            :rules="commentRules"
                        ></v-textarea>
                    </v-form>
                </v-card-text>

                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text @click="closeDialog">取消</v-btn>
                    <v-btn
                        color="primary"
                        @click="submit"
                        :loading="isSubmitting"
                    >提交</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>




        <router-view></router-view>

         <v-dialog
            v-model="tagDialog"
            max-width="600"
        >
            <v-card  color="grey lighten-4">
                <v-container class="white">
                     <v-chip-group column >
                        <v-chip color="primary" label v-for="tag of selectedTags" :key="tag.id" outlined>
                            {{tag.title}}
                        </v-chip>
                        <v-chip disabled style="background:none;">点击下面标签</v-chip>
                    </v-chip-group>
                </v-container>

                <v-container>
                    <v-row dense no-gutters class="caption text--secondary">
                        <v-col>
                            全部标签
                        </v-col>
                    </v-row>
                    <v-chip-group
                        v-model="selectedTags"
                        column
                        multiple
                        active-class="primary--text"
                    >
                        <v-chip label  v-for="tag of tags" :key="tag.id" outlined  :value="tag">
                            {{tag.title}}
                        </v-chip>
                        <span class="px-2 v-chip v-chip--clickable v-chip--label v-chip--no-color theme--light v-chip--outlined  v-size--default"
                            @click="newTagDialog = true">
                            <v-icon small >mdi-plus</v-icon>新标签
                        </span>
                    </v-chip-group>
                </v-container>

                 <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn  depressed  @click="tagDialog = false" >
                        取消
                    </v-btn>
                    <v-btn  depressed color="primary" @click="saveTagRelation">
                        确定
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <v-dialog v-model="newTagDialog" max-width="500">
            <v-card>
                <v-card-title>添加标签</v-card-title>
                <v-card-text>
                    <v-text-field
                        filled
                        rounded
                        dense
                        hide-details
                        placeholder="标签名称"
                        required
                        v-model="newTagTitle"
                    ></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn  depressed :disabled="savingTag" @click="newTagDialog = false">
                        取消
                    </v-btn>
                    <v-btn  depressed color="primary" :loading="savingTag" @click="saveNewTag">
                        确定
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            dialog: false,       // 控制弹窗显示
            comment: '',         // 留言内容
            isSubmitting: false, // 提交状态
            commentRules: [      // 验证规则
                v => !!v || '留言内容不能为空',
                v => v.length <= 500 || '内容不能超过500字'
            ],
            id: 0,
            loan:{},
            saving: false,
            statusDialog: false,
            tagDialog: false,
            newTagDialog: false,
            newTagTitle: '',
            tags: [],
            selectedTags: [],
            savingTag: false,
            statusNew: 0,
            statusItem: [
                { value: 1, text: '待跟进' },
                { value: 2, text: '已通话' },
                { value: 3, text: '已上门' },
                { value: 4, text: '已签约' },
                { value: 5, text: '已放款' },
                { value: 6, text: '已拒绝' },

                { value: 7, text: "恶意/骚扰" },
                { value: 8, text: "无效对话" },
                { value: 9, text: "空错号" },
                { value: 10, text: "回访-电话3次未接通" },
                { value: 11, text: "非本人" },
                { value: 12, text: "无意向" },
                { value: 13, text: "异地" },
                { value: 14, text: "资质不符" },


                { value: 15, text: "退款中" },
                { value: 16, text: "退款成功" },
                { value: 17, text: "退款失败" },
            ],
        }),

        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager'
            ]),
        },

        watch: {
            id(v) {
                this.load();
            }
        },

        created() {
            this.id = this.$route.params.id;
            this.loadTag();
        },

        beforeRouteUpdate(to, from, next) {
            this.id = to.params.id;
            next();
        },

        methods: {
            submit(){
                if (!this.$refs.form.validate()) return
                this.isSubmitting = true
                const that = this;
                axios.post(`/loan/${this.id}/refund`, {
                    refund_msg: this.comment
                }).then((response) => {
                    if (response.data.code == 0) {
                        this.isSubmitting = false
                        that.dialog = false;
                        that.load();
                    } else {
                        this.$toast.open({
                            message: response.data.msg,
                            type: response.data.code == 0 ? 'success' : 'error',
                            position: 'top-right',
                        });
                    }
                })
                    .catch(function () {})
                    .then(function () {
                    });
                this.closeDialog()
                this.$toast.success('提交成功')
            },

            openDialog(){
                this.dialog = true
            },
            closeDialog() {
                this.dialog = false
            },
            load() {
                axios.get(`/loan/${this.id}`).then((response) => {
                    if(response.data.code == 0) {
                        this.loan = response.data.data;
                        this.comment = response.data.data.refund_msg;
                        this.selectedTags = response.data.data.tags;
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            loadTag() {
                const that = this;
                axios.get(`/user/tag`).then((response) => {
                    if (response.data.code == 0) {
                        that.tags = response.data.data.items;
                    } else {
                        this.$toast.open({
                            message: response.data.msg,
                            type: response.data.code == 0 ? 'success' : 'error',
                            position: 'top-right',
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            saveTagRelation() {
                const that = this;
                axios.post(`/loan/${this.id}/tag`, {
                    tags: this.selectedTags
                }).then((response) => {
                    if (response.data.code == 0) {
                        that.tagDialog = false;
                        that.load();
                    } else {
                       this.$toast.open({
                            message: response.data.msg,
                            type: response.data.code == 0 ? 'success' : 'error',
                            position: 'top-right',
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            saveNewTag() {
                const that = this;
                that.savingTag = true;
                axios.post(`/user/tag`, {
                        title: that.newTagTitle,
                    }).then((response) => {
                        if (response.data.code == 0) {
                            that.tags.push(response.data.data);
                            that.newTagDialog = false;
                            that.newTagTitle = '';
                        }

                        this.$toast.open({
                            message: response.data.msg,
                            type: response.data.code == 0 ? 'success' : 'error',
                            position: 'top-right',
                        });
                })
                .catch(function () {})
                .then(function () {
                    that.savingTag = false;
                });
            },

            updateStatus() {
                this.update({status: this.statusNew}, () => (this.statusDialog = false));
            },
            update(data, callback) {
                const that = this;
                that.saving = true;
                axios.post(`/loan/${this.id}`, {...data})
                .then((response) => {
                    if (response.data.code == 0) {
                        this.loan = response.data.data;
                        if (typeof callback == "function") {
                            callback();
                        }
                    }
                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                })
                .catch(function () {})
                .then(function () {
                    that.saving = false;
                });
            }
        }
    }
</script>
